<script>
import * as echarts from 'echarts';

export default {
  props: {
    tdata: {
      type: Array,
      required: true,
    }
  },
  name: "topBarEnd",
  data() {
    return {
      myChart: null,
    };
  },
  watch: {
    tdata: {
      handler(newData) {
        this.updateChart(newData); // Update chart when tdata changes
      },
      deep: true,
    },
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById('main'));
    this.updateChart(this.tdata); // Initialize chart with provided data
  },
  methods: {
    updateChart(data) {
      this.myChart.setOption({
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ['product', '2015', '2016', '2017'],
          source: data, // Use external data
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
      });
    }
  }
}
</script>

<template>
  <div id="main" style="width: 100%; height: 300px;"></div>
</template>

<style scoped lang="scss">
</style>
